<template>
  <div class="synthetic-action" v-if="syntheticBaseDetail.images">
    <div
      class="m-top"
      :style="
        `background-image: url('${show_url + syntheticBaseDetail.images[0]}')`
      "
    >
      <div class="m-back" @click="goBack">
        <img src="@/assets/images/mobile_black/synthetic/synthetic_back.png" />
      </div>
    </div>

    <div class="need-padding-wrapper">
      <div class="m-topCenter">
        <div class="m-topCenter-time">
          {{ syntheticBaseDetail.start_time }} 至
          {{ syntheticBaseDetail.end_time }}
        </div>

        <div class="m-topCenter-background"></div>

        <div class="m-topCenter-cp">
          <img src="@/assets/images/mobile_black/synthetic/syncthetic_cp.png" />
        </div>

        <div class="m-topCenter-title">{{ syntheticBaseDetail.name }}</div>

        <div class="m-topCenter-desc">
          <div class="m-topCenter-desc-left">
            <span>每人限定合成 </span>
            <span class="color-green"
              >{{ syntheticDetail.already_compose }}/{{
                syntheticDetail.limit_compose
              }}份</span
            >
          </div>
          <div class="m-topCenter-desc-right">
            <span>限量</span>
            <span class="color-green">{{ syntheticBaseDetail.num }}</span>
            <span>|</span>
            <span>剩余</span>
            <span class="color-red">{{ syntheticBaseDetail.left_num }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="big-background">
      <!-- <img
        class="big-background-img"
        src="@/assets/images/pc_black/synthetic/synthetic_background.png"
      /> -->

      <div class="center-wrapper">
        <div class="back_part">
          <div class="back_btn" @click="goBack">
            <img src="@/assets/images/pc_black/auth/back.png" />
            <span>返回</span>
          </div>
        </div>

        <div class="synthetic-card">
          <img
            class="syntheticCard-img"
            :src="show_url + syntheticBaseDetail.images[0]"
          />

          <div class="syntheticCard-desc">
            <img
              class="syntheticCardDesc-backLine"
              src="@/assets/images/pc_black/synthetic/synthetic_card_backLine.png"
            />

            <div class="syntheticCardDesc-title">
              {{ syntheticBaseDetail.name }}
            </div>

            <div class="syntheticCardDesc-content">
              <p>
                <span>限量</span>
                <span class="color-green">{{ syntheticBaseDetail.num }}</span>
                <span>|</span>
                <span>剩余</span>
                <span class="color-red">{{
                  syntheticBaseDetail.left_num
                }}</span>
              </p>

              <p>
                {{ syntheticBaseDetail.start_time }} 至
                {{ syntheticBaseDetail.end_time }}
              </p>

              <p>
                <span>每人限定合成：</span>
                <span
                  :class="
                    syntheticDetail.already_compose >=
                    syntheticDetail.limit_compose
                      ? 'color-red'
                      : 'color-green'
                  "
                  >{{ syntheticDetail.already_compose }}/{{
                    syntheticDetail.limit_compose
                  }}份</span
                >
              </p>
            </div>
          </div>
        </div>

        <div class="synthetic-material">
          <div class="syntheticMaterial-title">合成材料</div>

          <ul class="syntheticMaterial-list">
            <li v-for="(item, index) in syntheticColor" :key="index">
              <img class="list-img" :src="show_url + item.icon" />

              <div
                :class="
                  item.already_num < item.num ? 'color-red' : 'color-green'
                "
                class="list-limit"
              >
                {{ item.already_num }}/{{ item.num }}
              </div>

              <div class="syntheticMaterialList-mask" v-if="item.is_light == 0">
                <img
                  v-if="isPhone"
                  src="@/assets/images/mobile_black/synthetic/synthetic_mask.png"
                />
                <img
                  v-else
                  src="@/assets/images/pc_black/synthetic/synthetic_mask.png"
                />
              </div>

              <span class="list-bottom-name">{{ item.name }}</span>
            </li>

            <li v-for="item in syntheticPiece" :key="item.piece_id">
              <img class="list-img" :src="show_url + item.icon" />

              <div
                :class="
                  item.already_num < item.num ? 'color-red' : 'color-green'
                "
                class="list-limit"
              >
                {{ item.already_num }}/{{ item.num }}
              </div>

              <div class="syntheticMaterialList-mask" v-if="item.is_light == 0">
                <img
                  v-if="isPhone"
                  src="@/assets/images/mobile_black/synthetic/synthetic_mask.png"
                />
                <img
                  v-else
                  src="@/assets/images/pc_black/synthetic/synthetic_mask.png"
                />
              </div>

              <span class="list-bottom-name">{{ item.name }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div
      :class="{ 'need-padding-wrapper': isPhone }"
      v-if="syntheticDetail.intro"
    >
      <div class="conditions-met">
        <p class="conditionsMet-title">满足条件</p>

        <p class="conditionsMet-content" v-html="syntheticDetail.intro"></p>
      </div>
    </div>

    <div class="action-btn">
      <button
        :class="{ 'btn-background-grey': syntheticDetail.botton == 0 }"
        :disabled="syntheticDetail.botton == 0"
        v-if="isPhone"
        @click="openBoxPopup"
      >
        {{ syntheticDetail.botton_text }}
      </button>
      <button
        :class="{ 'btn-background-grey': syntheticDetail.botton == 0 }"
        :disabled="syntheticDetail.botton == 0"
        v-else
        @click="openPcBoxPopup"
      >
        {{ syntheticDetail.botton_text }}
      </button>
    </div>

    <div class="pcPopup" v-if="isShowPcBoxPopup">
      <div
        class="pcBoxPopupContent"
        @animationend="pcFirstEnd"
        @webkitAnimationEnd="pcFirstEnd"
      >
        <img :src="pcClosePopupIcon" class="pcClosePopupIcon" />
      </div>
      <img class="animationImg" :src="animationImg" @dragstart.prevent />
    </div>
    <div class="pcPopup" v-if="isShowPcResultPopup">
      <div class="pcResultPopupContent">
        <p class="pcResultPopupTitle">恭喜获得</p>
        <p class="pcResultPopupName">{{ boxResult.resultName }}</p>
        <div class="pcResultPopupImage">
          <img :src="boxResult.resultImage" />
        </div>
        <img
          :src="pcClosePopupIcon"
          @click="closePcResultPopup"
          class="pcClosePopupIcon"
          @dragstart.prevent
        />
      </div>
    </div>

    <div class="phoneBoxPopUp" v-if="isShowBoxPopup" @touchmove.prevent>
      <div class="position">
        <!-- <div class="popupClose">
          <img :src="phoneClosePopupIcon" @click="closeBoxPopup" />
        </div> -->

        <img class="animationImg" :src="phoneAnmationImg" @dragstart.prevent />
      </div>
    </div>

    <div class="phoneResultPopup" v-if="isShowResultPopup" @touchmove.prevent>
      <div class="resultPopupContent">
        <p class="resultPopupTitle">恭喜获得</p>
        <p class="resultPopupName">{{ boxResult.resultName }}</p>
        <div class="resultPopupImage">
          <img :src="boxResult.resultImage" />
        </div>
      </div>
      <div class="popupClose">
        <img :src="phoneClosePopupIcon" @click="closeResultPopup" />
      </div>
    </div>
  </div>
</template>

<script>
// --- api ---
import { getDetailApi, doComposeApi, getListApi, getRecordApi } from "@/api";
// --- utils ---
import { startBodyMove, stopBodyMove, iscode, isPhone } from "@/utils";

export default {
  name: "SyntheticAction",
  data() {
    return {
      queryId: "",
      syntheticDetail: {},
      syntheticColor: [],
      syntheticPiece: [],
      syntheticBaseDetail: {},
      show_url: "",
      isPhone: false,
      manual: false,
      phoneAnmation: true,
      canClick: true,
      isLoad: false,
      animationImg: "",
      phoneAnmationImg: "",
      isShowPcBoxPopup: false,
      isShowPcResultPopup: false,
      isShowBoxPopup: false,
      isShowResultPopup: false,
      isShowPcRecordPopup: false,
      phoneClosePopupIcon: require("@/assets/images/invite/phoneCodePopupClose.png"),
      phoneClose: require("@/assets/images/invite/phoneClose.png"),
      pcClosePopupIcon: require("@/assets/images/invite/inviteCodePopupClose.png"),
      pcRecordPopupClose: require("@/assets/images/invite/pcClose.png"),
      pcClosePopupIcon: require("@/assets/images/invite/inviteCodePopupClose.png"),
      baseURL: "",
      pcOpenResultPopupId: "",
      recordPopupList: [],
      inviteInfo: {},
      boxResult: {},
    };
  },
  methods: {
    // ========== async ==========
    // 获取详情信息
    async getDetail() {
      const res = await getDetailApi({
        id: this.queryId,
      });
      if (iscode(res)) {
        this.show_url = res.result.show_url;
        this.syntheticDetail = res.result.detail;
        this.syntheticColor = res.result.color;
        this.syntheticPiece = res.result.piece;

        if (this.$route.query.which == "list") {
          this.getList();
        } else {
          this.getRecord();
        }
        // if (!this.syntheticBaseDetail.name) {
        //   this.getList();
        // }
      }
    },
    // 获取数据
    async getList() {
      let result = await getListApi({
        page: 1,
        pagesize: 99999,
      });
      if (iscode(result)) {
        const resData = result.result.list;
        resData.map((item) => {
          if (this.$route.query.id == item.id) {
            this.syntheticBaseDetail = item;
          }
        });
      }
    },
    async getRecord() {
      let result = await getRecordApi({
        page: 1,
        pagesize: 99999,
      });
      if (iscode(result)) {
        const resData = result.result.list;
        resData.map((item) => {
          if (this.$route.query.id == item.id) {
            this.syntheticBaseDetail = item;
          }
        });
      }
    },
    // 开始合成
    async luckDrawPrize(type) {
      // platform:1pc,2phone
      let result = await doComposeApi({
        id: this.$route.query.id - 0,
        platform: type,
      });
      if (iscode(result)) {
        const resData = result.result;

        setTimeout(() => {
          this.canClick = true;
        }, 1000);
        this.$set(
          this.boxResult,
          "resultImage",
          this.show_url + resData.entity.icon
        );
        this.$set(this.boxResult, "resultName", resData.entity.name);
        if (type == 1) {
          this.isShowPcBoxPopup = true;
          stopBodyMove();
        } else {
          this.isShowBoxPopup = true;
          this.phoneAnmation = false;
          setTimeout(() => {
            this.currentImg("phone");
          }, 300);
        }
      } else {
        setTimeout(() => {
          this.canClick = true;
        }, 2000);
      }
    },
    // ========== popup ==========
    pcFirstEnd() {
      setTimeout(() => {
        this.currentImg("pc");
      }, 300);
    },
    currentImg(type) {
      let time = 1;
      if (type == "pc") {
        let id = setInterval(() => {
          if (time < 13) {
            time++;
            this.$nextTick(() => {
              this.animationImg = require("@/assets/images/invite/animation/" +
                time +
                ".png");
            });
          } else {
            clearInterval(id);
            this.isShowPcBoxPopup = false;
            this.animationImg = "";
            this.openPcResultPopup();
          }
        }, 120);
      } else {
        let id = setInterval(() => {
          if (time < 17) {
            time++;
            this.$nextTick(() => {
              this.phoneAnmationImg = require("@/assets/images/invite/animation/phone/" +
                time +
                ".png");
            });
          } else {
            clearInterval(id);
            this.phoneAnmationImg = "";
            this.isShowBoxPopup = false;
            this.isShowResultPopup = true;
          }
        }, 120);
      }
    },
    //开启盲盒弹窗pc
    openPcBoxPopup() {
      if (this.canClick) {
        this.canClick = false;
        this.luckDrawPrize(1);
      }
    },
    //关闭盲盒弹窗pc
    closePcBoxPopup() {
      startBodyMove();
      clearInterval(this.pcOpenResultPopupId);
      this.isShowPcBoxPopup = false;
    },
    //打开盲盒结果弹窗pc
    openPcResultPopup() {
      stopBodyMove();
      clearInterval(this.pcOpenResultPopupId);
      this.isShowPcResultPopup = true;
    },
    //关闭盲盒结果弹窗pc
    closePcResultPopup() {
      startBodyMove();
      this.isShowPcResultPopup = false;
      this.getDetail();
    },
    //开启盲盒弹窗phone
    openBoxPopup() {
      if (this.canClick) {
        this.canClick = false;
        this.luckDrawPrize(2);
      }
    },
    //关闭盲盒弹窗phone
    closeBoxPopup() {
      if (this.phoneAnmation) {
        this.isShowBoxPopup = false;
      }
    },
    //打开盲盒结果弹窗phone
    openResultPopup() {
      this.luckDrawPrize(2);
    },
    //关闭盲盒结果弹窗phone
    closeResultPopup() {
      this.phoneAnmation = true;
      this.isShowResultPopup = false;
      this.getDetail();
    },

    // ========== common ==========
    // handleGetSyntheticCardDetail(payload) {
    //   this.syntheticBaseDetail = payload;
    //   // localStorage.setItem("syntheticBaseDetail", JSON.stringify(payload));
    // },

    // ========== goto ==========
    goBack() {
      window.history.back();
    },
  },
  created() {
    // localstorage syntheticBaseDetail
    // let sbd = JSON.parse(localStorage.getItem("syntheticBaseDetail"));
    // if (sbd) {
    //   this.syntheticBaseDetail = sbd;
    // }

    // isPhone
    isPhone() ? (this.isPhone = true) : (this.isPhone = false);
    // queryId
    this.queryId = this.$route.query.id * 1;
    // async
    this.getDetail();
    // globle eventbus
    // this.$bus.$on("getSyntheticCardDetail", this.handleGetSyntheticCardDetail);
  },
  beforeDestroy() {
    // this.$bus.$off("getSyntheticCardDetail");
  },
};
</script>

<style lang="less" scoped>
.synthetic-action {
  width: 100%;
  padding-bottom: 142px;

  .m-top,
  .m-topCenter {
    display: none;
  }

  .center-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
  }

  .back_part {
    width: 100%;
    padding-top: 20px;

    .back_btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 104px;
      height: 30px;
      border: none;
      background: none;
      background-image: url("~@/assets/images/personalCenter/btn.png");
      background-position: center center;
      background-size: 100% 100%;
      cursor: pointer;

      img {
        width: 20px;
        height: 6px;
      }

      span {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 12px;
        margin-left: 10px;
      }
    }
  }

  .big-background {
    position: relative;
    width: 100%;
    height: 1534px;
    background-image: url("~@/assets/images/pc_black/synthetic/synthetic_background.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    // background: #1e2122;
    // padding-bottom: 40px;

    .big-background-img {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      height: 1514px;
      width: 100%;
    }

    .synthetic-card {
      width: 420px;
      height: 645px;
      background: #2b2c2d;
      margin-top: 20px;
      overflow: hidden;

      .syntheticCard-img {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 420px;
        height: 420px;

        img {
          width: 100%;
          max-height: 420px;
          height: auto;
        }
      }

      .syntheticCard-desc {
        position: relative;
        // overflow: hidden;
        border-top: 1px solid transparent;

        .syntheticCardDesc-backLine {
          display: block;
          position: absolute;
          right: -45px;
          top: 0;
        }

        .syntheticCardDesc-title {
          position: relative;
          font-size: 24px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          line-height: 28px;
          text-align: center;
          margin-top: 40px;
        }

        .syntheticCardDesc-content {
          position: relative;
          margin-top: 30px;
          text-align: center;

          p {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 14px;
            margin: 0;
            padding: 0;
          }

          p:nth-child(1) {
            span {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              line-height: 12px;
            }

            span:nth-child(1),
            span:nth-child(4) {
              margin-right: 5px;
            }
            span:nth-child(3) {
              margin: 0 10px;
            }
          }

          p:nth-child(2) {
            margin: 20px 0;
          }
        }
      }
    }

    .synthetic-material {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      margin-top: 100px;

      ul,
      li {
        list-style: none;
      }

      .syntheticMaterial-title {
        font-size: 22px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 22px;
      }

      .syntheticMaterial-list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 582px;
        height: 602px;
        overflow: auto;
        margin-top: 40px;

        li {
          position: relative;
          width: 276px;
          height: 276px;
          background: #b9b8bd;
          margin-bottom: 80px;

          .list-img {
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
          }
          .list-limit {
            position: absolute;
            right: 5px;
            top: 5px;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #00ffb0;
            z-index: 4;
          }
          .list-bottom-name {
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translate(-50%, 40px);
            width: 100%;
            text-align: center;
            font-size: 22px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            z-index: 4;
          }

          .syntheticMaterialList-mask {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #000000;
            opacity: 0.6;
            z-index: 3;

            img {
              display: block;
              width: 72px;
              height: 35px;
            }
          }
        }
        li:nth-last-child(-n + 2) {
          margin-bottom: 0;
        }
      }
    }
  }

  .conditions-met {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 446px;
    background: #141414;
    overflow: auto;

    .conditionsMet-title {
      font-size: 22px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      line-height: 22px;
      margin-top: 60px;
    }

    .conditionsMet-content {
      width: 600px;
      min-height: 198px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 22px;
      margin-top: 40px;
    }
  }

  .action-btn {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 200px;
    background: #252525;

    button {
      min-width: 256px;
      height: 50px;
      border: none;
      background: none;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;
      font-size: 22px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #1e2020;
      line-height: 22px;
      cursor: pointer;
      margin-top: 60px;
      background-image: url("~@/assets/images/pc_black/synthetic/synthetic_btn_color.png");
      padding: 0 20px;
    }

    .btn-background-color {
      background-image: url("~@/assets/images/pc_black/synthetic/synthetic_btn_color.png");
    }
    .btn-background-grey {
      background-image: url("~@/assets/images/pc_black/synthetic/synthetic_btn_grey.png");
    }
  }

  .pcPopup {
    position: fixed;
    z-index: 99;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0 30px;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .pcBoxPopupContent {
      background: url("~@/assets/images/invite/inviteCodePopup.png");
      background-size: 100% 100%;
      width: 800px;
      height: 490px;
      position: relative;
      -webkit-animation: fade-in 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;
      animation: fade-in 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;

      .pcClosePopupIcon {
        cursor: pointer;
        position: absolute;
        z-index: 99;
        top: 30px;
        right: 30px;
        width: 32px;
        height: 32px;
      }
    }

    .animationImg {
      width: 800px;
      position: absolute;
    }

    .pcResultPopupContent {
      background: url("~@/assets/images/pc_black/synthetic/synthetic_popup.png");
      background-size: 100% 100%;
      width: 800px;
      height: 490px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      -webkit-animation: puff-in-center 0.3s cubic-bezier(0.47, 0, 0.745, 0.715)
        both;
      animation: puff-in-center 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) both;

      .pcResultPopupTitle {
        margin-top: 40px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
      }

      .pcResultPopupName {
        margin-top: 15px;
        font-size: 24px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;
      }

      .pcResultPopupImage {
        margin-top: 32px;

        img {
          // width: 120px;
          height: 271px;
        }
      }

      .pcClosePopupIcon {
        cursor: pointer;
        position: absolute;
        top: 30px;
        right: 30px;
        width: 32px;
        height: 32px;
      }
    }

    .recordPopupContent {
      width: 800px;
      height: 640px;
      background: #1e2020;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
      padding: 30px;
      overflow: scroll;
      position: relative;

      .recordPopupTop {
        display: flex;
        justify-content: space-between;

        .recordPopupTitle {
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }

        .recordPopupClose {
          position: absolute;
          cursor: pointer;
          top: 20px;
          right: 20px;
          width: 15px;
          height: 15px;
        }
      }

      .recordPopupCenter {
        margin-top: 30px;

        .recordPopupItem {
          border-bottom: 1px solid #444444;
          display: flex;
          align-items: center;
          padding: 20px 0;

          img {
            width: 60px;
            height: 60px;
            margin-right: 20px;
          }

          .recordItemName {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
          }

          .recordItemInfo {
            margin-left: auto;
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            .recordItemPhone {
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
            }

            .recordItemTime {
              margin-top: 10px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .need-padding-wrapper {
    padding: 0 4vw !important;
  }
  .synthetic-action {
    width: 100%;
    padding-bottom: 0;

    .center-wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      margin: 0 auto;
      overflow: hidden;
    }

    .back_part {
      display: none;
    }

    .m-top {
      display: block;
      position: relative;
      width: 100%;
      height: 100vw;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;

      .m-back {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 4.5333vw;
        left: 4vw;
        width: 10.6667vw;
        height: 10.6667vw;
        background: rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(3px);
        border-radius: 50%;

        img {
          display: block;
          width: 5.3333vw;
        }
      }
    }

    .m-topCenter {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 26.1333vw;
      background: #2b2c2d;
      border-radius: 0 1.6vw 1.6vw 1.6vw;
      margin-top: -13.8667vw;
      padding: 0 4vw;

      .m-topCenter-time {
        display: flex;
        align-items: center;
        position: absolute;
        left: 0;
        top: -7.4667vw;
        width: auto;
        height: 7.4667vw;
        background: linear-gradient(315deg, #00ffb0 0%, #ff8686 100%);
        padding: 0 6.1333vw 0 2.6667vw;
        font-size: 4.2667vw;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 4.2667vw;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
        background-image: url("~@/assets/images/pc_black/synthetic/synthetic_time_background.png");
      }
      // .m-topCenter-time::after {
      //   content: "";
      //   width: 0;
      //   height: 0;
      //   position: absolute;
      //   right: 0;
      //   top: 0;
      //   border: 0 solid transparent;
      //   border-top: 7.4667vw solid #b9b9b9;
      //   border-left: 2.6667vw solid transparent;
      // }

      .m-topCenter-background {
        position: absolute;
        right: 0;
        top: 0;
        width: 45.6vw;
        height: 100%;
        background-image: url("~@/assets/images/pc_black/synthetic/synthetic_card_backLine.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
      }

      .m-topCenter-cp {
        position: absolute;
        right: 4.8vw;
        top: 0;

        img {
          display: block;
          width: 13.3333vw;
          height: 11.7333vw;
        }
      }

      .m-topCenter-title {
        font-size: 5.3333vw;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 6.9333vw;
        margin-top: 5.3333vw;
      }

      .m-topCenter-desc {
        display: flex;
        justify-content: space-between;
        margin-top: 4vw;

        span {
          font-size: 3.2vw;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 3.2vw;
        }

        .m-topCenter-desc-right {
          position: relative;
          text-align: center;

          span:nth-child(1),
          span:nth-child(4) {
            margin-right: 0.6667vw;
          }
          span:nth-child(3) {
            margin: 0 1.3333vw;
          }
        }
      }
    }

    .big-background {
      background: none;
      width: 100%;
      height: 117.3333vw;
      overflow: hidden;
      margin: 0;
      padding: 0;
      padding: 0 4vw;
      margin-top: 4vw;

      .big-background-img,
      .synthetic-card {
        display: none;
      }

      .synthetic-material {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;
        background: #2b2c2d;
        border-radius: 12px;
        backdrop-filter: blur(3px);
        margin: 0;
        padding: 0;
        padding-bottom: 4vw;

        ul,
        li {
          list-style: none;
        }

        .syntheticMaterial-title {
          align-self: flex-start;
          font-size: 5.3333vw;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          line-height: 5.3333vw;
          padding: 0 5.3333vw;
          margin-top: 5.3333vw;
        }

        .syntheticMaterial-list {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          width: 100%;
          height: 98.6667vw;
          overflow: auto;
          padding: 0 5.3333vw;
          margin-top: 7.4667vw;

          li {
            position: relative;
            width: 38.6667vw;
            height: 38.6667vw;
            background: #e7e7e7;
            border-radius: 12px;
            margin-bottom: 5.3333vw;

            .syntheticMaterialList-mask {
              display: flex;
              justify-content: center;
              align-items: center;
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              background: #000000;
              opacity: 0.6;
              border-radius: 12px;

              img {
                display: block;
                width: 16.5333vw;
                height: 8vw;
              }
            }

            .list-img {
              display: block;
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              z-index: 2;
            }
            .list-limit {
              position: absolute;
              right: 0.6667vw;
              top: 0.6667vw;
              font-size: 2.9333vw;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #00ffb0;
              z-index: 4;
            }
            .list-bottom-name {
              position: absolute;
              left: 50%;
              bottom: 0;
              transform: translate(-50%, 5.3333vw);
              width: 100%;
              text-align: center;
              font-size: 3.2vw;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              z-index: 4;
            }
          }
          li:nth-last-child(-n + 2) {
            // margin-bottom: 4vw;
          }
        }
      }
    }

    .conditions-met {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      width: 100%;
      min-height: 72.8vw;
      background: #2b2c2d;
      border-radius: 12px;
      backdrop-filter: blur(3px);
      margin-top: 4vw;
      overflow: hidden;

      .conditionsMet-title {
        width: 100%;
        font-size: 5.3333vw;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 5.3333vw;
        margin-top: 5.3333vw;
        padding: 0 2.6667vw 0 5.3333vw;
      }

      .conditionsMet-content {
        width: 100%;
        min-height: 52.8vw;
        font-size: 3.7333vw;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #959596;
        line-height: 5.8667vw;
        margin-top: 4vw;
        padding: 0 2.6667vw 0 5.3333vw;
        overflow: auto;
      }
    }

    .action-btn {
      display: flex;
      justify-content: center;
      width: 100%;
      height: 21.8667vw;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(20px);
      margin-top: 2.9333vw;
      padding: 0 4vw;

      button {
        width: 100%;
        height: 9.6vw;
        border: none;
        background: none;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
        font-size: 3.7333vw;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #1e2020;
        line-height: 3.7333vw;
        cursor: pointer;
        margin-top: 3.4667vw;
        background-image: url("~@/assets/images/mobile_black/synthetic/synthetic_btn_color.png");
      }

      .btn-background-color {
        background-image: url("~@/assets/images/mobile_black/synthetic/synthetic_btn_color.png");
      }
      .btn-background-grey {
        background-image: url("~@/assets/images/mobile_black/synthetic/synthetic_btn_grey.png");
      }
    }

    .phoneBoxPopUp {
      position: fixed;
      z-index: 99;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      padding: 0 30px;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      flex-direction: column;

      .position {
        position: relative;
      }

      .animationImg {
        width: 100%;
        position: absolute;
        top: 16vh;
        z-index: 9999;
      }

      .popupClose {
        margin-top: 60px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 52px;
          height: 52px;
        }
      }
    }

    .phoneResultPopup {
      position: fixed;
      z-index: 99;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      padding: 0 30px;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      flex-direction: column;
      justify-content: center;

      .resultPopupContent {
        background: url("~@/assets/images/invite/phoneCodeResultPopup.png");
        background-size: 100% 100%;
        width: 100%;
        height: 980px;
        display: flex;
        flex-direction: column;
        align-items: center;
        -webkit-animation: puff-in-center 0.3s
          cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        animation: puff-in-center 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

        .resultPopupTitle {
          margin-top: 80px;
          font-size: 32px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;
        }

        .resultPopupName {
          margin-top: 26px;
          font-size: 48px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #000000;
        }

        .resultPopupImage {
          margin-top: 62px;

          img {
            height: 543px;
          }
        }
      }

      .popupClose {
        margin-top: 60px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 52px;
          height: 52px;
        }
      }
    }
  }
}

::-webkit-scrollbar {
  display: none;
}

// common style
.color-green {
  color: #00ffb0 !important;
}
.color-red {
  color: #ff8686 !important;
}
.color-grey {
  color: #999999 !important;
}
.need-padding-wrapper {
  padding: 0 30px;
}

// animate
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@-webkit-keyframes puff-in-center {
  0% {
    -webkit-transform: scale(3);
    transform: scale(3);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
@keyframes puff-in-center {
  0% {
    -webkit-transform: scale(3);
    transform: scale(3);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

@-webkit-keyframes puff-out-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
@keyframes puff-out-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);

    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
</style>
